<template>
  <div class="page-content">
    <div class="condition">
      <div class="condition-content">
        <Form ref="queryForm" label-position="right" :model="queryForm" inline>
          <Row>
            <Col span="15">
              <FormItem label="系统名称：" prop="systemId" :labelWidth="100">
                <Select v-model="queryForm.systemId" filterable>
                  <Option
                    v-for="system in systemList"
                    :value="system.id"
                    :label="system.name"
                    :key="system.id"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="query('queryForm')">查询</Button>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="handlerReset('queryForm')">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <div class="operation">
      <Row>
        <Col span="24">
          <Button type="primary" @click="openAddSystemPage">
            <Tooltip content="给当前用户添加系统访问权限">添加系统</Tooltip>
          </Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openDelSystemPage">
            <Tooltip content="将当前用户对该系统访问权限剔除">删除系统</Tooltip>
          </Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openAddRolePage">
            <Tooltip content="给当前用户授予角色">添加角色</Tooltip>
          </Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openDelRolePage">
            <Tooltip content="剥夺当前用户角色">删除角色</Tooltip>
          </Button>
        </Col>
      </Row>
    </div>
    <div class="content">
      <Table
        border
        stripe
        :columns="columns"
        :data="data"
        height="480"
        highlightRow
        @on-row-click="rowClick"
      >
        <template slot="footer">
          <Page
            show-total
            :total="total"
            @on-change="pageChange"
            show-sizer
            :pageSizeOpts="[5,10,15,20]"
            @on-page-size-change="pageSizeChange"
          ></Page>
        </template>
      </Table>
    </div>
    <!--添加系统-->
    <Modal
      title="添加系统"
      :closable="true"
      :maskClosable="true"
      v-model="addSystemModalFlag"
      @on-ok="addSystemOK('addSystemForm')"
      @on-cancel="addSystemCancel('addSystemForm')"
    >
      <Form ref="addSystemForm" :model="tmpSystemForm">
        <FormItem label="系统：" prop="systemId" :labelWidth="100">
          <Select v-model="tmpSystemForm.systemId" filterable>
            <Option
              v-for="system in systemList"
              :value="system.id"
              :label="system.name"
              :key="system.id"
            ></Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
    <!--添加角色-->
    <Modal
      title="添加角色"
      :closable="true"
      :maskClosable="true"
      v-model="addRoleModalFlag"
      @on-ok="addRoleOK('addRoleForm')"
      @on-cancel="addRoleCancel('addRoleForm')"
    >
      <Form ref="addRoleForm" :model="tmpRoleForm">
        <FormItem label="系统：" prop="systemId" :labelWidth="100">
          <Select v-model="tmpRoleForm.systemId" filterable>
            <Option
              v-for="system in systemList"
              :value="system.id"
              :label="system.name"
              :key="system.id"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="角色：" prop="roleId" :labelWidth="100">
          <Select v-model="tmpRoleForm.roleId" filterable>
            <Option v-for="role in roleList" :value="role.id" :label="role.name" :key="role.id"></Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  maintainRoleApi,
  maintainSystemApi,
  maintainDeleteRoleApi,
  maintainDeleteSystemApi,
  maintainApi,
} from '@/api/user'
import { getSystemListApi } from '@/api/system'
import { getRolesBySystemIdApi } from '@/api/roles'
export default {
  name: 'user-manager',
  data() {
    return {
      queryForm: {
        systemId: '',
      },
      //系统列表
      systemList: [],
      //角色列表
      roleList: [],
      tmpRoleForm: {}, //添加用户时需要临时容器去装载
      tmpSystemForm: {}, //添加用户时需要临时容器去装载
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '系统名',
          key: 'systemName',
        },
        {
          title: '系统描述',
          key: 'systemDesc',
        },
        {
          title: '角色名',
          key: 'roleName',
        },
        {
          title: '角色描述',
          key: 'roleDesc',
        },
      ],
      data: [], //用户数据
      total: 0,
      addSystemModalFlag: false, //添加页面模态窗口标志
      addRoleModalFlag: false, //添加页面模态窗口标志
      tblCurIndex: undefined, //选中角标
      tblCurData: {}, //选中数据
    }
  },
  props: {
    userId: {
      type: [String, Number],
      default: '',
    },
  },
  methods: {
    query(name) {
      let condition = Object.assign({}, this.$refs[name].model)
      condition.userId = this.userId
      var param = {}
      param.condition = condition
      param.page = this.page
      maintainApi(param)
        .then((response) => {
          this.data = response.data
          this.total = response.page.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handlerReset(name) {
      this.$refs[name].resetFields()
    },
    pageChange(pageNum) {
      this.page.pageNum = pageNum
      this.query('queryForm')
    },
    pageSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.query('queryForm')
    },
    openAddSystemPage() {
      this.addSystemModalFlag = true
    },
    openDelSystemPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择需要剔除的系统')
        return
      }
      this.$Modal.confirm({
        title: '剔除系统',
        content: '请确认是否要剔除【' + this.tblCurData.systemName + '】系统?',
        onOk: this.delSystemOK,
      })
    },
    delSystemOK() {
      maintainDeleteSystemApi(this.tblCurData.userToSystemId)
        .then((data) => {
          this.$Message.success('剔除成功')
          this.query('queryForm')
        })
        .catch((error) => console.log(error))
    },
    openAddRolePage() {
      this.addRoleModalFlag = true
    },
    openDelRolePage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择需要剔除的角色')
        return
      }
      this.$Modal.confirm({
        title: '剔除角色',
        content: '请确认是否要剔除【' + this.tblCurData.roleName + '】角色?',
        onOk: this.delRoleOK,
      })
    },
    delRoleOK() {
      maintainDeleteRoleApi(this.tblCurData.userToRoleId)
        .then((data) => {
          this.$Message.success('剔除成功')
          this.query('queryForm')
        })
        .catch((error) => console.log(error))
    },
    addRoleOK(name) {
      let param = Object.assign({}, this.tmpRoleForm)
      if (param.systemId === undefined || param.systemId === '') {
        this.$Message.warning('请选择系统')
        return
      }
      if (param.roleId === undefined || param.roleId === '') {
        this.$Message.warning('请选择角色')
        return
      }
      param.userId = this.userId
      maintainRoleApi(param).then((data) => {
        this.$refs[name].resetFields()
        this.$Message.success('操作成功')
        this.query('queryForm')
      })
    },
    addRoleCancel(name) {
      this.$refs[name].resetFields()
    },
    addSystemOK(name) {
      let param = Object.assign({}, this.tmpSystemForm)
      if (param.systemId === undefined || param.systemId === '') {
        this.$Message.warning('请选择系统')
        return
      }
      param.userId = this.userId
      maintainSystemApi(param).then((data) => {
        this.$refs[name].resetFields()
        this.$Message.success('操作成功')
        this.query('queryForm')
      })
    },
    addSystemCancel(name) {
      this.$refs[name].resetFields()
    },
    rowClick(data, index) {
      this.tblCurIndex = index
      this.tblCurData = data
    },
    view(data) {
      console.log(data)
    },
  },
  created: function () {
    getSystemListApi()
      .then((data) => {
        this.systemList = data
      })
      .catch((error) => console.log(error))
  },
  watch: {
    'queryForm.systemId': function (systemId) {
      if (systemId == undefined || systemId == '') {
        this.roleList = []
      } else {
        getRolesBySystemIdApi(systemId)
          .then((data) => {
            this.roleList = data
          })
          .catch((error) => console.log(error))
      }
    },
  },
}
</script>
<style lang="less" scoped>
.page-content > .condition {
  border: 1px solid #b8c7cb;
}

.page-content > .condition > .condition-content {
  margin-top: 10px;
}

.page-content > .operation {
  margin-top: 15px;
  background-color: rgba(113, 182, 114, 0.1);
}
</style>